﻿<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <meta charset="utf-8"/>
    <link href="css/default.css" rel="stylesheet"/>

    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="js/ajaxupload.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            new AjaxUpload('#button2', {
                action: '/upload',
                data: {
                    'blank_name': $("#input_blank_name").val(),
                    'blank_id': $("#blank_id").val()
                },
                responseType: "json",
                onSubmit: function (file, ext) {
                    // Allow only images. You should add security check on the server-side.
                    if (ext && /^(jpg|png|jpeg|gif|bmp)$/.test(ext)) {
                        this.setData({
                            'blank_name': $("#input_blank_name").val(),
                            'blank_id': $("#blank_id").val()
                        });
                    } else {
                        alert("只能上传图片");
                        return false;
                    }
                },
                onComplete: function (file, response) {
                    if(response.data.Result){
                        location.reload();
                    }else{
                        alert("添加失败");
                    }
                },
                onChange:function(file, extension){
                    var blank_name = $("#input_blank_name").val();
                    if(blank_name==""){
                        alert("请填写姓名");
                        return false;
                    }
                    var blank_id=$("#blank_id").val();
                    if(blank_id==""){
                        alert("请填写id");
                        return false;
                    }
                }
            });
        });

    </script>

    <script type="text/javascript" language="javascript">
        function edit(b) {
            this.window.location = ("RegisterPicEdit.html");
        }
    </script>
    <script type="text/javascript" src="js/jquery.pager.js"></script>

    <script type="text/javascript">

        var server_host = "http://localhost:8080"

        var pageSize = 10;
        var pager;
        url = '/get_blank_count';
        $(document).ready(function () {
            $.ajax({
                type: "GET",
                url: url,
                contentType: "application/json; charset=utf-8",
                success: function (result) {
                    if (result.data > 0) {
                        pager = $(".pager").pager({
                            pageSize: pageSize,
                            itemCount: result.data,
                            onPageChanged: true,
                            onPageChange: function (pageIndex) {
                                render_blank(pageIndex+1,pageSize);
                            }
                        });
                    }

                }
            });

            render_blank(1, pageSize);

        });


    </script>
    <script type="text/javascript">
        function render_blank(PageIndex, PageSize) {
            $("#table_data").find("td").remove();
            $.ajax({
                type: "POST",
                url: "/Get_Page_Blank",
                contentType: "application/json; charset=utf-8",
                data: JSON.stringify({"PageIndex": PageIndex, "PageSize": PageSize}),
                success: function (result) {
                    var p = 0;
                    if (result.data != null && result.data.length > 0) {

                        for (var t = 0; t < result.data.length / 5+1; t++) {
                            data = new Array(5);
                            for (var i = 0; i < 5; i++) {
                                data[i] = result.data[p * 5 + i];
                            }
                            create_html(data, "tr" + p.toString());
                            p++;
                        }

                    }

                }
            });
        }

        function create_html(data, trid) {
            for (var i = 0; i < data.length; i++) {
                var guid = data[i].Guid;
                var image = $("<img/>").attr("src", "/get_blank_image/" + data[i].Guid);
                var br = $("<br/>");
                var td = $('<td></td>').append(image);
                var lab=$('<label></label>').text("ID:"+data[i].CustomId+"姓名:"+data[i].Name);

                var btn_del = $("<input/>").attr("value", "删除").attr("type", "button").click(function () {
                    del_blank(guid);
                });
//                var btn_edit=$("<input/>").attr("value","编辑").attr("type","button").click(function(){
//
//                });
                td.append(br);
                td.append(lab);
                td.append(btn_del);
//                td.append(btn_edit);
                $("#" + trid).append(td);
            }
        }

        function del_blank(guid) {
            $.ajax({
                type: "GET",
                url: "/del_blank_by_guid/" + guid,
                success: function (result) {
                     location.reload();
                }
            });
        }
    </script>

    <script type="text/javascript">
        function del_all_blank(){
            $.ajax({
                url:"/del_all_blank",
                type:"GET",
                success:function(data){

                }
            })
        }
    </script>

    <style>
        .pager {
            display: inline-block;
            font: 12px/21px "宋体";
            margin-top: 20px;
        }

        .pager a, .pager .flip, .pager .curPage {
            border: 1px solid #e3e3e3;
            display: inline-block;
            height: 22px;
            line-height: 22px;
            text-align: center;
        }

        .pager a {
            background: none repeat scroll 0 0 #fff;
            color: #010101;
            text-decoration: none;
            width: 26px;
        }

        .pager a:hover {
            background: none repeat scroll 0 0 #f1f1f1;
        }

        .pager .noPage {
            color: #a4a4a4;
        }

        .pager .curPage {
            background: none repeat scroll 0 0 #49abde;
            color: #ffffff;
            width: 26px;
        }

        .pager .flip {
            width: 56px;
        }
    </style>

</head>
<body>
<div>
    <table class="RegisterPic_table">
                <th colspan="6">注册照片管理</th>
        <!--<tr style="height: 40px">-->
            <!--<td colspan="6">-->
                <!--姓名：<input type="text" id="name"/>-->
                <!--编号（ID）：<input type="text" name="ID"/>-->
                <!--<input id="btn_upload" type="button" name="btn_select" value="查 询"/>-->


            <!--</td>-->

        <!--</tr>-->
        <tr>
            <td colspan="6">

                姓名：<input type="text" id="input_blank_name"/>
                编号（ID）：<input type="text" id="blank_id"/>

                <button id="button2">上传图片</button>

                <button id="btn_del_all_blan" onclick="del_all_blank()">删除所有黑名单</button>


            </td>
        </tr>
    </table>
    <table id="table_data" class="RegisterPic_table">

        <tr id="tr0"></tr>
        <tr id="tr1"></tr>
        <tr id="tr2"></tr>
        <tr id="tr3"></tr>


    </table>


    <div class="pager">

    </div>
</div>

</body>
</html>
